<script setup lang="ts">
    import { ref, reactive, computed } from 'vue'
    import { ElLoading } from 'element-plus'
    import ProfileFilter from './ProfileFilter.vue'
    import ProfileList from './ProfileList.vue'
    import Profile from '../Profile/index.vue'
    import { Teamap } from '../../core/Teamap'

    const Profiler = reactive(Teamap.Profiler)
    let keywords = reactive({ ...Profiler.keywords })

    const profiles = ref([] as Profile[])
    const profileId = ref("" as string)

    const profileVisible = computed(() => {
        return profileId.value.length > 0
    })

    const onFilterChange = (newKeywords: keywordsOf<Profile>): void => {
        keywords = newKeywords
        init()
    }

    const onProfilePick = (id: string): void => {
        profileId.value = id;
    }

    const index = computed(() => {
        return profiles.value.findIndex((profile) => {
            return profile.id == profileId.value
        })
    })

    const go = (step: number = 1) => {
        profileId.value = profiles.value[index.value + step].id;
    }

    function init() {
        const loading = ElLoading.service({
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.8)',
        })

        Profiler.find().then(result => {
            profiles.value = result.data
            document.getElementById('splash')?.remove()
            loading.close()
        })
    }

    init()
</script>
<template>
    <profile-filter :keywords="keywords" :data="profiles" @filterChange="onFilterChange" />
    <profile-list :data="profiles" @profilePick="onProfilePick" />
    <div>
        <el-dialog :fullscreen="true" :model-value="profileVisible" @close="profileId = ''" :show-close="false"
            custom-class="fullscreen-dialog">
            <el-affix>

                <div class="top-nav">
                    <div class="left">
                        <el-button icon="el-icon-arrow-left" @click="profileId = ''"></el-button>
                    </div>
                    <div class="right">
                        <el-button icon="el-icon-arrow-up" @click="go(-1)" :disabled="index <= 0"></el-button>
                        <el-button class="el-icon-arrow-down" @click="go()" :disabled="index >= profiles.length - 1">
                        </el-button>
                    </div>
                </div>
            </el-affix>
            <profile :id="profileId" />
        </el-dialog>
    </div>
</template>

<style scoped>
    .top-nav {
        position: absolute;
        width: 100%;
        left: 0;
        display: flex;
        /* position: fixed; */
        top: 0;
        color: #333;
        transition: all linear 0.5s;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }

    .top-nav>.left {
        padding: 20px 20px;
        width: 60px;
    }

    .top-nav>.right {
        padding: 20px 24px;
        flex: 1;
        text-align: right;
    }

    .top-nav>.right .el-button {
        border: solid 1px;
        border-radius: 15%;
        background: rgba(255, 254, 254, 0.3);
        color: white;
    }

    .top-nav .el-button {
        background: transparent;
        border: solid 0px;
        color: white;
        font-size: 28px;
        padding: 6px;
        min-height: 0px;
    }

    .top-nav .el-button[disabled] {
        opacity: 0.2;
    }

    :deep(.el-dialog__header) {
        display: none;
    }

    :deep(.el-dialog__body) {
        padding: 0px;
    }
</style>